
<template>
    <div class="loginBox">
        <!-- 遮罩层 -->
        <div class="mask"  @click="loginIsShow(false)"></div>
        <!-- 登陆框 -->
        <div class="login">
            <!-- 取消 -->
             <div class="close"   @click="loginIsShow(false)"></div>
             <section>
                <a href="javascript:;" :class="{active:isShow}"  @click='isShow=true'>手机登陆</a><span class="span">|</span>
                <a href="javascript:;" :class="{active:!isShow}"  @click="showQrCode">微信扫码登陆</a>
             </section>
                <div class="center">
                    <!-- 手机登陆 -->
                    <div class="phoneLogin" v-show="isShow">
                        <div class="row">
                            <input type="text" placeholder="请输入手机号" v-model="phoneNumber">
                        </div>
                         <div class="row">
                            <slide-verify :l="42" :r="20" :w="362" :h="140" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock" :slider-text="msg" :imgs='imgArr' ></slide-verify>
                        </div>
                         <div class="row">
                            <input type="text" placeholder="请输入短信验证码" v-model="phoenCode"><button class="btn btncode" @click="getCode" v-show="isShowcount">获取验证码</button>
                            <button class="btn btncode"  v-show="!isShowcount">{{count}}</button>
                        </div>
                        <div class="row">
                          <button class="btn btnlogin" @click="loginCode">登陆</button>

                        </div>
                    </div>
                    <!-- 二维码登陆 -->
                    <div class="qrLogin" v-show="!isShow"  id="weixin"></div>
                </div>
        </div>
       
    </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
import {codePhoneNueber } from '@/utils'
import {SendSMSApi,LoginApi,bindingApi} from '@/JingPinApi/api'

export default {
    data(){
        return{
            phoenCode:'',
            count:6,
            phoneNumber:"",
            msg: "向右滑动",
            isShow:true,
            isShowcount:true,
            imgArr:[
                require ('../assets/img/integral-01.9386d4bf.png'),
                require ('../assets/img/integral-02.150d92a1.png'),
                require ('../assets/img/integral-03.9870f3f1.png')
            ]
        }
    },
  
 methods:{
    ...mapMutations({
      loginIsShow:'model/loginIsShow',
      isShowgwcFn:'Isshowgwc/isShowgwcFn',
      isShowToast:'isShowToast/isShowToast'  
      }),
      ...mapActions({
      asyncisShowToast:'isShowToast/asyncisShowToast',
      asyncchangUserInfo:'userInfo/asyncchangUserInfo',

      }),

    // 微信扫码登陆
    showQrCode(){
            this.isShow=false;
            let _this = this;
            new WxLogin({
            id: "weixin",
            appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
            scope: "snsapi_login",
            // 扫码成功后重定向的接口
            redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
            // state填写编码后的url
            state: encodeURIComponent(
              window.btoa("http://192.168.10.184:8081/" + _this.$route.path)
            ),
            // 调用样式文件
            href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlLA0KLmltcG93ZXJCb3ggLmluZm8gew0KICAgIGRpc3BsYXk6IG5vbmU7DQp9DQoNCi5pbXBvd2VyQm94IHFyY29kZSB7DQogICAgbWFyZ2luLXRvcDogMjBweDsNCn0=",
          });
    },

            // 封装登陆验证
       toVerify(){
        //  第一步 验证手机号  在 utils 文件中封装了正则验证
          if ( !codePhoneNueber(this.phoneNumber)) {
            this.asyncisShowToast({ isShowToast:true,ToastText:'请输入正确手机号',ToastType:'error'})
        //  alert('请输入正确手机号')
            return
       }
   
        // // 第二步验证滑块   
        if(this.msg=='再试一次'||this.msg=='向右滑动'){
            // alert('请滑动滑块验证')
        this.asyncisShowToast({ isShowToast:true,ToastText:'请滑动滑块验证',ToastType:'warning'})
        
        
            return
        }
        return true
       }  , 

 
      // 拼图成功
    onSuccess(times) {
      let ms = (times / 1000).toFixed(1);
      this.msg = "验证成功, 耗时 " + ms + "s";
    //   alert('滑块验证成功')
        this.asyncisShowToast({ isShowToast:true,ToastText:'滑块验证成功',ToastType:'success'})
    },
    // 拼图失败
    onFail() {
      this.onRefresh(); // 重新刷新拼图
    //    alert('验证失败，请重新验证')
    this.asyncisShowToast({ isShowToast:true,ToastText:'验证失败，请重新验证',ToastType:'error'})

    },
    // 拼图刷新
    onRefresh() {
      this.msg = "再试一次";
    },


    // 获取验证码
   async getCode(){
     
          if (!this.toVerify()) return;

        //   发送 axios请求 方法封装在JingPinApi文件里面
        let res =  await SendSMSApi(
           { phone:this.phoneNumber}
        )
        console.log(res);
        if (!res) return; //当response.data.code !== 0成立时 这边接收到 undefined 相当于得到false 取反之后直接return打断
        if (res.code == 0) {
              this.isShowcount =false
              let tiemr = setInterval(()=>{
                this.count--;
                // console.log( this.count);
                if (this.count==0) {
                    clearInterval(tiemr)
                    // clearsetInterval(tiemr)
                    this.count= 6
                    this.isShowcount =true
                }
        },1000) 
        }
      
    } ,

    // 登陆验证判断
     async loginCode(){
        // let flag = this.toVerify()
        //     if (!flag)return;
        //     alert('登陆成功')

            if (!this.toVerify()) return;
            // 验证码非空判断

            if (!this.phoenCode) {
             this.asyncisShowToast({ isShowToast:true,ToastText:'请输入验证码',ToastType:'warning'})
                // alert('请输入验证码')
                return
            }
            // alert('登陆成功')


            // 登陆请求

            let uuid=localStorage.getItem('uuid')
             console.log(uuid);
             let res 
            //  绑定手机号的请求
            if (uuid) {
                 res =  await bindingApi(
                 { phone:this.phoneNumber,
                    verifyCode:this.phoenCode,
                    uuid
                 })
                   localStorage.removeItem('uuid')
            }else{
                // 正常的登陆请求
                 res =  await LoginApi(
                 { phone:this.phoneNumber,
                    verifyCode:this.phoenCode,
                 }
                 )
            }
                 localStorage.setItem(
                    'x-auth-token',res['x-auth-token']
                 )

            console.log(res);
            this.asyncisShowToast({ isShowToast:true,ToastText:'登陆成功',ToastType:'success'})
            this.loginIsShow(false)
            this.isShowgwcFn(true)
            this.asyncchangUserInfo()
            
    },

  }
   
    
}
</script>

<style lang='less' scoped>
.qrLogin{
    text-align: center;
}
    .loginBox{
        z-index: 999;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        .mask{
        width: 100%;
        height: 100%; 
        background: rgba(0,0,0,.5);
        }
        .login{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 555px;
            height: 423px;
            background: url('../assets/img/login-box-bg.png') no-repeat;
            .close{
                position: absolute;
                top: 15px;
                right: 60px;
                width: 22px;
                height: 22px;
                background: url('../assets/img/close.png');
            }
            section{
                padding: 50px 50px 20px 50px;
                text-align: center;
                a{  
                    color: gray;
                    text-decoration: none;
                }
                .active{
                    color: #000;
                }
                .span{
                    padding: 10px;
                }
            }
            .center{
                // border: 1px solid #000;
                width: 360px;
                margin: 0 auto;
                .phoneLogin{
                    .row{
                        margin-bottom: 20px;
                        display: flex;
                        input{
                            flex: 1;
                            height: 45px;
                            text-indent: 1em;
                        }
                        .btn{
                            color: #fff;
                            // background-color: rgb(10,50,142);
                            background-color: #0A32A7;
                            border: none;
                        }
                        .btncode{
                            width: 80px;
                            margin-left: 10px;
                        }
                        .btnlogin{
                            width: 100%;
                            height: 50px;

                        }
                    }

                }
            }
        }
    }


    /deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }
    .slide-verify-block{
        width: 85px;
        height: 136px;
    }
    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }
    &:hover {
        canvas {
            display: block;
        }
        .slide-verify-refresh-icon {
            display: block;
        }
    }
}
</style>